<template>
  <el-dialog v-model="dialogFormVisible" title="新增管理员" width="720px" @open="getList" @close="clearInfo" z-index="1000">
    <el-form
        ref="formRef"
        :model="FromData"
        status-icon
        label-position="right"
        label-width="100px"
        class="diaForm"
    >
      <el-form-item
          label="角色名称:"
          prop="role_name"
          :rules="[
        { min:2, message: '请输入至少两个字符串',trigger:'blur' },
        { required: true, message: '请输入至少两个字符串',trigger:'blur'},
      ]"
      >
        <el-input v-model="FromData.role_name" class="diaInput"></el-input>
      </el-form-item>
      <el-form-item
          label="上级角色:">
        <el-select v-model="SelectValue" class="m-2" placeholder="Select" size="large">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
          label="菜单权限:">
        <el-tree
            :data="data"
            show-checkbox
            :props="defaultProps"
            ref="tree"
            node-key="permission_id"
            />
      </el-form-item>
      <el-form-item
          label="排序:"
          prop="sort"
          :rules="[
        { required: true, message: '请输入至少一个数字',trigger:'blur' },
         // { type: 'number', message: '请输入数字',trigger:'blur' },
      ]">
        <el-input v-model="FromData.sort" class="diaSort"></el-input>
      </el-form-item>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Submit(formRef)"
        >确定</el-button
        >
      </span>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {reactive, ref,nextTick} from "vue";
import {getPermissionList, roleAddModify} from "../../../HTTP/api";
import {getPermissionListArr} from "@/util/getUser";
import {ElMessage} from "element-plus";
const formRef = ref()
const SelectValue = ref('')
const dialogFormVisible = ref(false)
const FromData = reactive({
  role_name: '',
  sort: ''
})
const props = {multiple: true}
const options = [
  {
    value: '1',
    label: '顶级角色'
  },
  {
    value: 2,
    label: '运营人员'
  },
  {
    value: 3,
    label: '客服人员'
  }
]
const data = ref()
const tree = ref(null)
const emit= defineEmits(['EditSuccess'])
const defaultProps = {
  id: "permission_id",
  children: 'children',
  label: 'permission_name',
}
defineExpose({
  dialogFormVisible
})
let roleInfo = defineProps(["roleInfo"])
const Submit = (formRef) => {
  const {role_id} = roleInfo.roleInfo
  if (!formRef) return
  formRef.validate((valid) => {
    if (valid) {
      let permissions = []
      tree.value.getCheckedNodes().forEach(item => {
        permissions.push(item.permission_id)
      })
      let data = role_id?{...FromData, permissions,role_id}:{...FromData, permissions}
      roleAddModify(data).then(res => {
        if (res.code === 2000) {
          ElMessage({
            message: '操作成功',
            type: 'success',
          })
          emit('EditSuccess',true)
          dialogFormVisible.value = false
        } else {
          ElMessage.error('添加失败')
        }
      })
    } else {
      return false
    }
  })
}
const getList = () => {
  if (roleInfo.roleInfo) {
    const {sort, permission, role_name} = roleInfo.roleInfo
    FromData.role_name = role_name
    FromData.sort = sort
    let tem=[]
    permission.forEach(item=>{
      tem.push(item.permission_id)
    })
    nextTick(()=>{
      console.log(tem)
      tree.value.setCheckedKeys(tem)
    })
  } else {
    FromData.role_name = ""
    FromData.sort = ""
    nextTick(()=>{
      tree.value.setCheckedKeys([],false)
    })
  }
  if (!data.value) {
    getPermissionList().then(res => {
      if (res.code === 2000) {
        data.value = getPermissionListArr(res.data)
      }
    })
  }
}
const clearInfo = () => {
  nextTick(()=>{
    tree.value.setCheckedKeys([])
  })
}
</script>
<style scoped>
.diaInput {
  width: 364px;
  height: 40px;
}
.diaSort {
  width: 88px;
  height: 30px;
}
.diaForm {
  margin-left: 100px;
}

.el-form-item {
  margin-bottom: 30px;
}

.dialog-footer {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

</style>
